Novidades na Web

Rachel Andrew

Publicado em 20 de maio de 2025

No Google I/O 2025, a apresentação "O que há de novo na Web" compartilhou todos os anúncios da Baseline, além de alguns dos recursos que passaram a fazer parte dela este ano. Foi um ano incrível para a Web e para o Baseline. Esta postagem é um resumo de tudo o que foi mencionado, com todos os links para saber mais.

Painel da plataforma da Web e recursos da Web

Em 2024, anunciamos o lançamento inicial do Painel da Plataforma Web, que usa o conjunto de dados de recursos da Web, permitindo que você explore todos os recursos que fazem parte da linha de base.

Os dados de elementos da Web agora estão completos, com todos os elementos da plataforma mapeados. À medida que novos recursos são adicionados à base de referência a cada mês, os dados são atualizados e tudo isso é exposto no painel.

Ferramentas para descobrir sua própria meta de referência

Embora você possa basear sua política de suporte ao navegador no objetivo móvel de padrões amplamente disponíveis, como a agência do Reino Unido Clearleft, também é possível adotar um objetivo fixo com base em um ano de referência. Agora você pode usar seus próprios dados de usuários, junto com os dados de recursos da Web, para encontrar o melhor público-alvo para você.

No ano passado, na I/O, anunciamos que o RUMvision implementaria a referência no produto, e essa integração já está ativa.

Como ele usa seus dados de RUM, ele ajuda a identificar qual ano de referência adotar com base nesses dados, em vez de uma média global. Ele também pode ajudar a saber se a disponibilidade geral da referência faz sentido para você.

Você também pode usar os dados do Google Analytics para saber claramente qual porcentagem de seus usuários aceita cada meta de referência com o novo Verificador de meta de referência do Google Analytics.

Essas são apenas duas das ferramentas que ajudam a mapear seus dados de usuários reais para a referência.

O grupo da comunidade Web DX lançou recentemente uma extensão para a Netlify que mostra suporte para anos de referência diferentes e está amplamente disponível nos seus sites para ajudar você a decidir o que segmentar nas ferramentas de build. Em breve, vamos lançar integrações com o produto RUM do Observatory da Cloudflare e o Contentsquare.

Integrar os dados com suas próprias ferramentas

Os dados de elementos da Web são abertos e disponíveis para suas integrações. Estamos tentando facilitar isso.

Use a API Web Platform Dashboard ou consuma os dados de recursos da Web diretamente do pacote npm.

Agora é possível mapear versões de navegador para um destino de referência usando o módulo baseline-browser-mapping do grupo da comunidade WebDX do W3C. Esse módulo pode ser usado em um ambiente JavaScript do lado do servidor ou fazendo o download de arquivos JSON ou CSV que são atualizados diariamente no repositório.

Esses dados incluem mapeamentos não apenas para o conjunto de navegadores de referência principal, mas também para navegadores secundários, como Samsung Internet, Opera, UC Browser e Android Webview.

Saiba se os recursos têm suporte no destino de referência

As informações de referência agora estão na maioria das páginas do MDN e do Can I Use. Elas também podem ser encontradas no painel da plataforma da Web e em artigos no web.dev e CSS Tricks. No entanto, tudo isso exige que você procure suporte. Seria muito mais útil ter informações de referência exibidas no seu ambiente de desenvolvimento integrado enquanto você programa e como parte de todas as outras ferramentas que você usa.

Estamos felizes em compartilhar que muitas ferramentas importantes agora têm suporte integrado ou são facilmente integradas.

browserslist-config-baseline

Muitas ferramentas, como o Babel e o PostCSS, usam a browserslist para determinar quais navegadores são compatíveis.

Em parceria com o CG do WebDX e membros da comunidade, a equipe do Chrome ajudou a lançar uma nova ferramenta chamada browserslist-config-baseline. Isso permite configurar as metas da lista de navegadores em termos de valor de referência, como "amplamente disponível" ou "anos de valor de referência".

Com isso, qualquer ferramenta que use um destino de lista de navegadores agora pode ser expressa em termos de linha de base.

Saiba mais em Usar a referência com o browserslist.

Valor de referência em linters: ESLint e Stylelint

Recentemente, o uso da baseline com linters foi possível com algumas novas ferramentas no espaço de linters, começando com o ESLint para CSS.

O ESLint de referência tem uma regra use-baseline. Você pode definir isso como o destino de referência preferido, e ele vai avisar quando usar recursos mais recentes do que o destino. É possível escolher como resolver essas mensagens de aviso: substituindo esse recurso por primitivos ou suprimindo o aviso do linter, que é uma solução perfeitamente válida quando você sabe que está usando um recurso de ponta com segurança, por exemplo, se for um aprimoramento progressivo.

Por padrão, o ESLint não vai avisar se recursos mais recentes forem usados em blocos @supports, porque os navegadores sem suporte não os avaliarão de qualquer maneira.

Para suas necessidades de linting de HTML, também há um plug-in da comunidade chamado html-eslint.

O Stylelint oferece suporte oficial a um plug-in chamado stylelint-plugin-use-baseline. Essa regra se comporta exatamente como a regra ESLint para CSS, mas é executada no Stylelint.

Muitos linters também têm plug-ins de IDE, para que você possa receber feedback imediato sobre o status de referência durante a programação por meio de sublinhados em zigue-zague.

Linha de base no VS Code e no JetBrains WebStorm

Muitos IDEs já têm suporte para passar o cursor sobre um recurso no editor e conferir a lista de versões de navegadores compatíveis.

No entanto, pode ser muito difícil entender se esse recurso é realmente seguro de usar. É preciso analisar mentalmente se há navegadores importantes ausentes dessa lista e a versão mais recente do navegador.

Para corrigir esse problema, fizemos uma parceria com o ambiente de desenvolvimento integrado mais usado por milhões de desenvolvedores da Web, o VS Code, para integrar os dados de referência diretamente a esses cards de informações.

Agora você pode passar o cursor sobre um recurso e saber se ele é considerado como padrão e por quanto tempo, ou se há navegadores principais que ainda não o implementaram totalmente.

Os recursos com suporte incluem propriedades CSS, elementos HTML e atributos HTML. Saiba mais em O Visual Studio Code agora oferece suporte à linha de base.

Essa integração significa que todos os ambientes de desenvolvimento integrados baseados no VS Code também vão se beneficiar desses cards de informações.

Também podemos anunciar que o JetBrains está implementando cards de sobreposição no ambiente de desenvolvimento integrado JavaScript e TypeScript do WebStorm.

A Web está melhorando mais rápido do que nunca

Esperamos que a referência ajude você a aproveitar o fato de que a Web interoperável está melhorando mais rápido do que nunca.

Você pode usar o Painel da plataforma da Web para conferir todos os recursos que foram disponibilizados como baseline nos últimos doze meses, desde o Google I/O 2024.

Também há vários recursos que você pode ter certeza de que serão disponibilizados em breve, já que estão incluídos no projeto Interop 2025. Leia sobre todos os recursos incluídos em Interop2025: another year of web platform improvements.

Modos de escrita na horizontal

Já vimos um recurso que se tornou disponível como padrão: os valores sideways-rl e sideways-lr para a propriedade CSS writing-mode. Se você estiver usando um modo de gravação vertical apenas para fins de layout, os valores laterais provavelmente serão os ideais.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Posicionamento da âncora

O posicionamento de âncora foi lançado no Chrome 125. Ele oferece uma maneira de vincular a posição de um elemento a uma âncora, por exemplo, ao abrir uma dica de ferramenta com um botão.

Agora, ele está incluído na Interop 2025, então ele vai se juntar ao Baseline este ano.

Core Web Vitals: LCP e INP

API LCP

API Event Timing (para INP)

As Core Web Vitals podem ajudar a quantificar a experiência no seu site e identificar oportunidades de melhoria. O objetivo da iniciativa das Core Web Vitals é simplificar o cenário e ajudar os sites a se concentrarem nas métricas mais importantes, as Core Web Vitals.

A Interop 2025 inclui as métricas de Maior exibição de conteúdo (LCP) e Interaction to Next Paint (INP) implementando a API LargestContentfulPaint e a API Event Timing em todos os navegadores.

Melhorias no elemento <details>

O elemento <details> já está disponível na versão básica. Ele foi incluído na Interop 2025 porque há vários recursos que tornam os widgets de revelação com <details> mais úteis.

O elemento <details> contém um elemento <summary>, que é a parte visível na página quando o elemento <details> está fechado. Fora do <summary> está o conteúdo do elemento <details>, que fica oculto até que o usuário clique no resumo.

Uma das coisas que estão sendo interoperáveis durante a Interop 2025 é ocultar o conteúdo usando content-visibility em vez de display, o que significa que, se não for expandido, o conteúdo não será renderizado.

O pseudoelemento ::marker também faz parte do trabalho de interoperabilidade de 2025. O pseudoelemento ::marker permite estilizar o triângulo de abertura do elemento <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Em seguida, outro pseudoelemento: ::details-content.

::details-content representa o conteúdo, a parte do elemento de detalhes que se expande e se contrai, e permite estilizar.

[open]::details-content {
  border: 5px dashed hotpink;
}

Também há algumas melhorias, como a expansão automática do elemento <details> com correspondências de pesquisa na página e a transferência do valor until-found do atributo HTML hidden para "Baseline Newly available". Isso oculta um elemento até que ele seja encontrado usando a pesquisa de página do navegador ou seja acessado diretamente seguindo um fragmento de URL.

CSS @scope

A regra @scope do CSS permite limitar o alcance dos seletores. Ao definir uma raiz de escopo com @scope, todas as regras de estilo aninhadas dentro da at-rule são aplicadas apenas a essa árvore do DOM.

Por exemplo, se você quiser segmentar apenas elementos <img> dentro de um elemento com uma classe de .card, .card se tornará a raiz do escopo.

@scope (.card) {
    img {
        border-color: green;
    }
}

Saiba mais em Limitar o alcance dos seletores com a regra @scope do CSS.

scrollend

Outro recurso que reduz a complexidade e melhora as interfaces de rolagem é scrollend. Sem o evento scrollend, não há uma maneira confiável de detectar que uma rolagem foi concluída.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Com o evento scrollend, o navegador faz toda essa avaliação difícil para você.

document.onscrollend = event => {…}

Confira mais exemplos em Scrollend, um novo evento JavaScript.

Transições de visualização do mesmo documento

Por último, mas não menos importante, as transições de visualização fazem parte da interoperabilidade 2025. O trabalho envolve transições de visualização do mesmo documento, ou seja, para apps de página única e também para conferir classes de transições.

Acompanhe o painel de Interop 2025 para ver como o projeto está se desenvolvendo ao longo do ano.

Os recursos incluídos na Interop 2025 não serão os únicos que vão fazer parte da Baseline este ano, mas a inclusão deles nos projetos é um bom sinal de que eles são priorizados e serão lançados em breve.

Estamos apenas começando

Foi um ano incrível para a Baseline, e já percorremos um longo caminho desde nossos anúncios do ano passado. Agora estamos em uma posição em que o preenchimento de dados de recursos da Web está concluído. Isso abriu as comportas e permitiu que ferramentas para desenvolvedores fossem criadas. Estamos apenas começando. Se você tiver um produto ou ferramenta de código aberto que se beneficiaria com a inclusão desses dados, entre em contato.

Fique de olho no web.dev, porque vamos continuar publicando anúncios sobre novas ferramentas e tutoriais para ajudar você a aproveitar tudo que a Web tem a oferecer.